<template>
  <div id="app">
    <van-row>
      <van-sidebar v-model="active" @change="onChange">
        <van-sidebar-item title="标签名 1" />
        <van-sidebar-item title="标签名 2" />
        <van-sidebar-item title="标签名 3" />
      </van-sidebar>
      <van-row class="rightHeader" style="flex: 1">
        <van-col span="12" class="list">
          <img class="imgs" src="../../assets/image/home/shopImg.png" alt="" />
        </van-col>
        <van-col span="12" class="list">
          <img class="imgs" src="../../assets/image/home/shopImg.png" alt="" />
        </van-col>
        <van-col span="12" class="list">
          <img class="imgs" src="../../assets/image/home/shopImg.png" alt="" />
        </van-col>
      </van-row>
    </van-row>
    <div style="height: 50px"></div>
    <BottomNav />
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref } from "vue";
  import BottomNav from "./../../components/Tabbar/index.vue";
  import { Toast } from "vant";

  export default defineComponent({
    components: {
      BottomNav,
    },
    setup() {
      const active = ref(0);
      const onChange = (index: number) => {
        active.value = index;
      };
      return {
        active,
        onChange,
      };
    },
  });
</script>
<style lang="less">
  :root {
    --van-sidebar-selected-border-color: var(--van-green);
  }
  .rightHeader {
    padding-top: 10px;
    .list {
      padding: 0 5px 5px;
    }
    .imgs {
      width: 100%;
      height: 140px;
    }
  }
</style>
